<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">表格</div>
			<formTable ref="TableRef" v-model="formData.table" :template="{ name: '', type: '' }" drag-sort placeholder="暂无数据">
				<el-table-column prop="name" label="名称" min-width="180">
					<template #default="scope">
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" min-width="180">
					<template #default="scope">
						{{ scope.row.type == 1 ? '显示' : '隐藏' }}
					</template>
				</el-table-column>
			</formTable>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">编辑</div>
			<el-button size="default" type="primary" class="mb-4 mr-[15px]" @click="addTable"> 添加 </el-button>
			<el-button size="default" type="danger" class="mb-4 mr-[15px]" @click="deleteTable"> 删除 </el-button>
			<el-form :model="formData">
				<formTable ref="TableRef2" v-model="formData.table2" :template="{ name: '', type: '' }" drag-sort placeholder="暂无数据">
					<el-table-column prop="name" label="名称" min-width="180">
						<template #default="scope">
							<el-form-item :prop="`table2[${scope.$index}].name`">
								<el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
								<div class="el-form-tips">选择名称</div>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="类型" min-width="180">
						<template #default="scope">
							<el-form-item :prop="`table2[${scope.$index}].type`">
								<div>
									<el-select v-model="scope.row.type" placeholder="请选择类型" class="w-full" clearable>
										<el-option label="显示" value="1" />
										<el-option label="隐藏" value="0" />
									</el-select>
									<div class="el-form-tips">选择类型</div>
								</div>
							</el-form-item>
						</template>
					</el-table-column>
				</formTable>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compFormTable">
import { ref, reactive } from 'vue';

const formData = reactive({
	table: [
		{
			name: '品类1',
			type: '1',
		},
		{
			name: '品类2',
			type: '0',
		},
	],
	table2: [
		{
			name: '品类1',
			type: '1',
		},
		{
			name: '品类2',
			type: '0',
		},
	],
});

const TableRef = ref(null);

const TableRef2 = ref(null);

const addTable = () => {
	TableRef2.value?.pushRow({
		name: '品类' + (Number(formData.table2.length) + 1),
		type: '1',
	});
};

const deleteTable = () => {
	TableRef2.value?.deleteRow(formData.table2.length - 1);
};
</script>

<style scoped lang="scss"></style>
